<template>
    <div>
        <el-from>
            <h1>{{title}}</h1>
            <el-form-item label = "编号:">
                <el-input width ="100" v-model="product.id" placeholder="id" />
            </el-form-item>
            <el-form-item label = "专辑:">
                <el-input width ="100" v-model="product.picurl" placeholder="picurl" />
            </el-form-item>
            <el-form-item label = "名字:">
                <el-input width ="100" v-model="product.name" placeholder="name" />
            </el-form-item>
            <el-form-item label = "歌曲:">
                <el-input width ="100" v-model="product.url" placeholder="url" />
            </el-form-item>
            <el-form-item label = "作者:">
                <el-input width ="100" v-model="product.artistsname" placeholder="artistsname" />
            </el-form-item>
        </el-from>
        <div class = "dialog-footer">
            <el-button style="margin-left: 550px;" type = "warning" @click = "doAdd">确认添加</el-button>
        </div>
    </div>

</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus'

defineProps(["title"])
//定义子组件可以注册的方法 （红函数defineEmits）
const  emit   = defineEmits(['onClose'])
//添加数据
const product = ref({
    id:undefined,
    name:"",
    url:"",
    picurl:"",
    artistsname:""
})
const doAdd = ()=>{
    fetch("http://localhost:3000/musics/",{
                    method:"post",
                    body:JSON.stringify(product.value)
                }).then(response=>response.json()).then((data)=>{
                    ElMessage.success('操作成功')
                    //向父组件发送事件
                    emit("onClose","你好，我已经完事了")
                      
                })
}
</script>